<template>
    <el-dialog :title="titleMap[mode]" v-model="visible" :width="1500"  destroy-on-close @closed="$emit('closed')" align-center>
        <el-button type="primary" @click="print">打印</el-button>
        <el-main class="printMain" ref="printMain">
            <div class="title">入库单</div>
            <div class="print_flex"> 
                <div style="width: 33%">加工方: {{process?.apply_name}}</div>
                <div style="width: 33%">需方: {{buyer?.buyer_name}}</div>
                <div style="width: 33%">入库单号: {{detail?.purchase_ware_code}}</div>
            </div>
            <div class="print_flex" v-if="is_apply"> 
                <div style="width: 33%"></div>
                <div style="width: 33%">坯布供方: {{apply?.apply_name}}</div>
                <div style="width: 33%">坯布入库单号: {{detail?.purchase_ware_code}}</div>
            </div>
            <div class="margin">(1)加工入库单: {{detail?.goods_name}} ，花型编号、数量、单价、克重见下表：</div>
            <table border="1" style="border-collapse: collapse; width: 100%;">
                <thead>
                    <tr style="height:32px;line-height: 32px;">
                        <th class="table_border" style="width: 80px"></th>
                        <th class="table_border">花型</th>
                        <th class="table_border" v-for="(item,index) in table_list" :key="index">{{item.name}}</th>
                        <th class="table_border">合计</th>
                        <th class="table_border" v-if="is_price">单价(元/米)</th>
                        <th class="table_border">克重(克/米)</th>
                        <th class="table_border" style="width: 200px">备注</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item,index) in order_detail" :key="index">
                        <td class="table_border" style="width: 80px">{{index + 1}}</td>
                        <td class="table_border">{{item.flower}}</td>
                        <td class="table_border" v-for="(item1,index1) in table_list" :key="index1">
                            {{item[item1.name]}}
                        </td>
                        <td class="table_border">{{item.total_number}}</td>
                        <td class="table_border" v-if="is_price">{{detail.price}}</td>
                        <td class="table_border">{{detail.weight}}</td>
                        <td class="table_border" style="width: 200px">{{item.remark}}</td>
                    </tr>
                    <tr>
                        <td class="table_border" style="width: 80px"></td>
                        <td class="table_border">合计</td>
                        <td class="table_border" v-for="(item1,index1) in table_list" :key="index1">
                            {{item1.total_number}}
                        </td>
                        <td class="table_border">{{detail.total_num}}</td>
                        <td class="table_border" v-if="is_price"></td>
                        <td class="table_border"></td>
                        <td class="table_border" style="width: 200px"></td>
                    </tr>
                </tbody>
            </table>
        </el-main>
	</el-dialog>
</template>

<script>
import print from '@/utils/print'
export default {
	emits: ['success', 'closed'],
	data() {
		return {
			dialog: {
				client: false
			},
			mode: "add",
			titleMap: {
				print: '打印',
			},
			visible: false,
            detail: {},
            is_correlation: "",
            is_price: "",
            is_apply: "",
            table_list: [],
            order_detail: [],
            buyer: {},
            apply: {},
            process: {},
            date: this.moment().format('YYYY-MM-DD'),
            total_number: "",
		}
	},
	mounted() {
	},
	methods: {
        print(){
            const fileName = this.detail?.purchase_ware_code ? `加工入库单_${this.detail?.purchase_ware_code}` : '加工入库单';
            print(this.$refs.printMain, { title: fileName });
            setTimeout(()=>{
                this.visible = false
            },500)
        },
		//显示
		open(mode = 'add') {
			this.mode = mode;
			this.visible = true;
			return this
		},
        async setData(data) {
            this.is_correlation = data.is_correlation
            this.is_price = data.is_price
            this.is_apply = data.is_apply
            var res = await this.$API.business.machining.house.detail.get({id: data.id});
            this.buyer = res.data.buyer
            this.apply = res.data.apply
            this.process = res.data.processFactory
            this.detail = res.data;
            let sample = []
            let color = res.data.select_colors_all.split(',')
            color.map(item=>{
                sample.push({
                    show: res.data.select_colors.includes(item),
                    name: item
                })
            })
            this.sampleList = sample
            this.flowerList = res.data.select_flower_param
            this.select_flower_param = res.data.select_flower_param_all
            let colorName = []
            res.data.order_detail[0].color_data.map(item=>{
                if(res.data.select_colors.includes(item.color_name)){
                    colorName.push({
                        name: item.color_name,
                        number: item.number
                    })
                }
            })
            this.table_list = colorName
            let tota_number = 0
            let array = []
            res.data.order_detail.map((item,index)=>{
                res.data.select_flower_param.map(item2=>{
                    if(item.flower == item2.flower){
                        const dynamicFields = Object.fromEntries(
                            this.table_list.map(item1 => {
                                const colorItem = item.color_data.find(c => c.color_name === item1.name);
                                return [item1.name, colorItem?.number || 0];
                            })
                        );
                        array.push({
                            index: index + 1,
                            flower: item2.flower,
                            flower_image: item2.flower_image,
                            remark: item.remark,
                            total_number: item.total_count,
                            ...dynamicFields
                        })
                    }
                })
            })
            this.total_number = tota_number
            this.order_detail = array
            this.table_list.map(item=>{
                if(this.order_detail.some(item1 => item1[item.name])){
                    const values = this.order_detail.map(item1 => Number(item1[item.name]));
                    item.total_number = values.reduce((prev, curr) => {
                        const value = Number(curr);
                        return !isNaN(value) ? prev + value : prev;
                    }, 0);
                }
            })
        },
	}
}
</script>

<style lang="scss" scoped>
.title {
    font-size: 20px;
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
}
td{
    text-align: center;
}
.table_border{
    width: 150px;
    height: 32px;
}
table{
    tbody{
        font-size: 13px;
        tr {
            page-break-inside: avoid;
            -webkit-region-break-inside: avoid; 
        }
        tr:last-child{
            page-break-after: avoid;
            
        }
    }
} 
</style>
